<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum border_line">
      <el-col :span="24">
        <div style="width:100%; height:120px;margin-bottom: 20px;">
          <div class="header_total">
            <ul class="header_box">
              <li>
                <div class="num_number">568</div>
                <div class="num_desc">商品类别总数</div>
              </li>
              <li>
                <div class="num_number">63589</div>
                <div class="num_desc">商品总数</div>
              </li>
              <li>
                <div class="num_number">568</div>
                <div class="num_desc">当月购买件数</div>
              </li>
              <li>
                <div class="num_number">26万</div>
                <div class="num_desc">当月营销额</div>
              </li>
              <li>
                <div class="num_number">752</div>
                <div class="num_desc">当月新增用户数</div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-col>
    <el-col :span="24" class="warp-main">
      <section class="chart-container" style="margin-top: -10px;">
        <el-row style="margin-top:30px;height: 320px;background:#fff;">
          <el-col :span="12">
            <div id="chartLine1" :style="{ width: '100%', height: '300px' }"></div>
          </el-col>
          <el-col :span="12">
            <div id="chartLine2" style="width:100%; height:300px;"></div>
          </el-col>
        </el-row>
        <el-row style="height: 320px;background:#fff;border-top:1px solid #ccc;">
          <el-col :span="16">
            <div class="fast_button">
              <el-tooltip class="item" effect="dark" content="您可以快捷的为租客办理入住" placement="bottom">
                <router-link :to="{ path: '/apartment/tenant/add' }">
                  <el-button>添加用户<i class="el-icon-circle-plus el-icon--right"></i></el-button>
                </router-link>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="为租客办理退租" placement="bottom">
                <router-link :to="{ path: '/apartment/tenant/return' }">
                  <el-button>添加商品<i class="el-icon-circle-plus el-icon--right"></i></el-button>
                </router-link>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="缴纳押金" placement="bottom">
                <router-link :to="{ path: '/apartment/tenant/deposite' }">
                  <el-button>添加类别<i class="el-icon-circle-plus el-icon--right"></i></el-button>
                </router-link>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="登记客户信息等" placement="bottom">
                <router-link :to="{ path: '/apartment/client/list' }">
                  <el-button>查找商品<i class="el-icon-circle-plus el-icon--right"></i></el-button>
                </router-link>
              </el-tooltip>
            </div>
            <div class="other_function">
              <el-tabs type="border-card">
                <el-tab-pane label="登录记录">
                  <div class="login_record">
                    <ul>
                      <li v-for="(item, index) in tableData" :key="index" v-if="index < 5">
                        <span class="login_record_ip">IP：{{ item.loginIp }}</span>
                        <span class="login_record_time">时间：{{ item.loginTime | formaDate }}</span>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="当前版本">
                  <div class="other_info">
                    <!-- <ul>
                              <li v-if="tableVersion.length != 0">前端版本：{{frontVersion}}</li>
                              <li v-if="tableVersion.length != 0">后端版本：{{tableVersion.backendVersioName}}</li>
                              <li v-if="tableVersion.length != 0">数据库版本：{{tableVersion.dbVersioName.versionName}}</li>
                              <li v-if="version">自助设备云端版本：{{version}}</li>
                          </ul> -->
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="right_function">
              <div class="right_function_title">
                <span>其他</span>
              </div>
              <div class="right_function_manage">
                <div class="function_manage_top">
                </div>
                <div class="function_manage_top">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </section>
    </el-col>

  </el-row>
</template>

<script>
export default {
  data() {
    return {
      isManagement: false,
      loading: false,
      isShowTable: false,
      message: null,
      tableData2: [],
      tableColumns: [],
      frontVersion: null,
      inputContent: null,
      showAlert: false,
      showPwdAlert: false,
      showSqlAlert: false,
      inputPwd: null,
      inputPwd2: null,
      dayCheckinNum: null,
      dayCheckoutNum: null,
      emptyRoom: null,
      monthCheckinNum: null,
      monthCheckoutNum: null,
      tableData: [],
      tableVersion: [],
      version: null
    };
  },
  created: function () {
    // this.getRecent30Record();
    // this.getRecent12Record();
  },
  mounted() {
    this.getRecent30Record()
    this.getRecent12Record();
  },
  methods: {
    //最近30天，每天退租人数
    getRecent30Record() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartLine1'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      })
    },
    //最近 12 个月每月入住，退租的人数
    getRecent12Record() {
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById('chartLine2'))
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
    }

  },
}
</script>
<style>
.sql>.el-table th>.cell {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.el-dialog {
  min-width: 480px;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 38%;
}
</style>
<style scoped="scoped">
@import url("~@/assets/css/apartment_right.css");

.el-tabs--border-card {
  border: 1px solid #dcdfe6;
  box-shadow: none;
}

.el-tabs--border-card>.el-tabs__header {
  background-color: #f5f5f6;
  border-bottom: none;
  margin: 0;
}

.dialog_error {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
</style>